<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 3px solid hotpink;
        }
    </style>
</head>

<body>
    <div class="box">
        <button id="all">全部数据</button>
        <button id="add">添加数据</button>
        <button id="del">删除数据</button>
        <button id="upd">修改数据</button>
        <button id="sea">查询数据</button>
    </div>

    <!-- <label for="">学号<input type="text" id="number" placeholder="请输入学号" /> </label><br />
        <label for="">姓名<input type="text" id="name" placeholder="请输入姓名" /> </label><br />
        <label for="">数学成绩<input type="text" id="math" placeholder="请输入数学成绩" /> </label><br />
        <label for="">英语成绩<input type="text" id="english" placeholder="请输入英语成绩" /> </label><br />
        <label for="">语文成绩<input type="text" id="chinese" placeholder="请输入语文成绩" /> </label><br />
        <label for="">学期<input type="text" id="semester" placeholder="请输入学期" /> </label><br /> -->

    <table cellspacing="0" border="1px" width="500px">
        <thead>
            <tr>
                <th>id</th>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>数学成绩</th>
                <th>英语成绩</th>
                <th>语文成绩</th>
                <th>学期</th>
            </tr>
        </thead>

        <tbody></tbody>
    </table>

    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script>
        const url = 'http://127.0.0.1:3002/api/user'

        //获取全部数据
        // $(function () { 
        //     $('#all').click(function () {
        //         $.ajax({
        //             url: url + '/list',
        //             type: 'get',
        //             dataType: 'json',
        //             success: function (res) {            
        //                 console.log(res);
        //             }
        //         })
        //     })
        // })

        //获取全部数据
        $(function () {
            $.ajax({
                url: url + "/list",
                type: "get",
                dataType: "json",
                success: function (res) {
                    console.log(res.data);
                    $(res.data).each(function (index, item) {
                        $("tbody").append(`<tr>
                                     <td>${item.id}</td>
                                     <td>${item.studentNumber}</td>
                                     <td>${item.name}</td>
                                     <td>${item.classNumber}</td>
                                     <td>${item.math}</td>
                                     <td>${item.english}</td>
                                    <td>${item.chinese}</td>
                                    <td>${item.Year}</td>
                                </tr>`);
                    });
                },
            });
        });

        $(function () {
            $('#add').click(function () {
                $.ajax({
                    url: url + '/create',
                    type: 'post',
                    data: {
                        "id": 6,
                        "studentNumber": "2024006",
                        "name": "王八",
                        "classNumber": 2,
                        "math": 88,
                        "english": 77,
                        "chinese": 95,
                        "Year": "2024-2025"
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })

        $(function () {
            $('#del').click(function () {
                $.ajax({
                    url: url + '/delete',
                    type: 'post',
                    data: {
                        "id": 5,
                        //  "studentNumber": "2024005",
                        //  "name": "孙七",
                        //  "classNumber": 2,
                        //  "math": 80,
                        //  "english": 75,
                        //  "chinese": 85,
                        //  "Year": "2024-2025"
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })

        $(function () {
            $('#upd').click(function () {
                $.ajax({
                    url: url + '/update',
                    type: 'post',
                    data: {
                        "id": 5,
                        "studentNumber": "2024005",
                        "name": "吴思婕",
                        "classNumber": 2,
                        "math": 80,
                        "english": 75,
                        "chinese": 85,
                        "Year": "2024-2025"
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })

        $(function () {
            $('#sea').click(function () {
                $.ajax({
                    url: url + '/search',
                    type: 'get',
                    data: {
                        "id": 1,
                        //  "studentNumber": "2024005",
                        //  "name": "孙七",
                        //  "classNumber": 2,
                        //  "math": 80,
                        //  "english": 75,
                        //  "chinese": 85,
                        //  "Year": "2024-2025"
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>

</html>